
import { standardFormat, standardFormatNoHour } from '@/filters/date';
import { moneyFilter } from '@/filters/number';
import { clientStatusFilter, setPayWay, resourceType } from '@/filters/status';
import { downloadFile } from '@/utils';
import FileShowList from '@/components/CreateOrder/fileShowList';
import PriceColumn from '@/components/Common/baseComponent/priceTableColumn';
import CheckUserInfo from '@/components/Common/baseComponent/CheckUserInfo/index.js';
export default {
  name: 'DetailField',
  components: { FileShowList, PriceColumn, CheckUserInfo },
  filters: {
    standardFormat,
    standardFormatNoHour,
    moneyFilter,
    resourceType
  },
  props: {
    settingItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    dataItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isBlank: {
      type: Boolean,
      deafult: false
    }
  },
  methods: {
    getData() {
      const dataItem = this.dataItem;
      const settingItem = this.settingItem;
      // 处理数据层级，比如：obj.data、obj.obj1.data、obj.obj1.obj2.data
      if (settingItem.parentField && settingItem.secondField) {
        if (!dataItem[settingItem.parentField] || !dataItem[settingItem.parentField][settingItem.secondField] || dataItem[settingItem.parentField][settingItem.secondField][settingItem.fieldName] === null) {
          return '--';
        }
        return dataItem[settingItem.parentField][settingItem.secondField][settingItem.fieldName];
      } else if (settingItem.parentField) {
        if (!dataItem[settingItem.parentField] || dataItem[settingItem.parentField][settingItem.fieldName] === null) {
          return '--';
        }
        if (settingItem.fieldName === 'resourceAttributionMatrix') {
          // 单独处理所属经营体
          return { value: dataItem[settingItem.parentField][settingItem.fieldName], tip: dataItem[settingItem.parentField][settingItem.tip] };
        }
        return dataItem[settingItem.parentField][settingItem.fieldName];
      } else {
        if (dataItem[settingItem.fieldName] === null) {
          return '--';
        }
        return dataItem[settingItem.fieldName];
      }
    },
    goDetail() {
      const params = { orderId: this.dataItem.id };
      if (this.isBlank) {
        const routeUrl = this.$router.resolve({
          name: 'orderDetail',
          params
        });
        window.open(routeUrl.href, '_blank');
      } else {
        this.$router.push({
          name: 'orderDetail',
          params
        });
      }
    },
    downloadFile(e, publishImage, publishImageName) {
      e.stopPropagation();
      const img = /(\.(gif|png|jpg|jpeg|webp|bmp|tif|pdf))$/i;
      if (img.test(publishImageName)) {
        window.open(publishImage);
      } else {
        downloadFile(publishImage, publishImageName);
      }
    },
    renderText(data, goDetail = false) {
      return (
        <el-tooltip open-delay={800} class='item' placement='top' effect='dark'>
          <div slot='content' style='max-width: 200px;'>{data}</div>
          <div onClick={goDetail ? () => { this.goDetail(); } : ''} style={goDetail ? 'color: #406EFF;cursor: pointer;' : ''} class='ellipsisOne'>{data}</div>
        </el-tooltip>
      );
    },
    renderTime(data, noHour = true) {
      if (noHour) {
        return (<div>{ standardFormatNoHour(data, 'YYYY/MM/DD') }</div>);
      }
      return (<div>{ standardFormat(data, 'YYYY/MM/DD HH:mm') }</div>);
    },
    renderPrice(data, isExcept = true) {
      if (isExcept) {
        return (<div>{ moneyFilter(data / 100) }</div>);
      }
      return (<div>{ moneyFilter(data) }</div>);
    },
    renderFormatPrice(data) {
      return (
        <PriceColumn real-val={data} price={data / 100} />
      );
    },
    renderStauts(data, type) {
      if (type === 'setPayWay') {
        return (<div>{ setPayWay(data) }</div>);
      }
      return (<div>{ clientStatusFilter(data) }</div>);
    },
    renderResourceType(data) {
      return (<div>{ resourceType(data) }</div>);
    },
    renderOrderOperator(data) {
      if (!data || data.length === 0) return (<div>--</div>);
      return <CheckUserInfo multiple userList={data} />;
    },
    renderCreateUser(data) {
      if (!data) return (<div>--</div>);
      const dataItem = this.dataItem;
      return <CheckUserInfo userId={dataItem.orderInfo.createUserId} label={dataItem.orderInfo.createName} />;
    },
    renderLink(data) {
      const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)([A-Za-z0-9-~]+)/;
      if (reg.test(data)) {
        return (<a onClick={(e) => {
          e.stopPropagation();
        }} href={data} style='color: #406EFF;display:flex;align-items:center;cursor: pointer;' target='_blank'><i class='el-icon-link' />链接</a>);
      }
      return this.renderText(data);
    },
    renderFile(data) {
      if (typeof data === 'string') {
        const dataItem = this.dataItem;
        const publishImageName = dataItem.orderInfo.publishImageName;
        return (
          <el-tooltip open-delay={800} class='item' placement='top' effect='dark'>
            <div slot='content' style='max-width: 200px;'>{publishImageName}</div>
            <div onClick={(e) => { this.downloadFile(e, data, publishImageName); }}
              style='font-size: 14px; cursor: pointer; color: #406EFF; text-overflow: ellipsis; overflow: hidden;white-space: nowrap;'>
              { publishImageName }
            </div>
          </el-tooltip>
        );
      } else {
        return (<file-show-list fileNameStyle={{ maxWidth: '100px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }} fileList={data}></file-show-list>);
      }
    },
    renderCooperationDepartment(data) {
      if (data.length > 0) {
        const cooperationDepartment = data.map(i => i.name).join('/');
        return (
          <el-tooltip open-delay={800} class='item' placement='top' effect='dark'>
            <div slot='content' style='max-width: 200px;'>{cooperationDepartment}</div>
            <div class='ellipsisOne'>{ cooperationDepartment }</div>
          </el-tooltip>
        );
      } else {
        return (<div>--</div>);
      }
    },
    renderCostConfirm(data) {
      return data === 1 ? (<div style='color:#406EFF;'>已确认</div>) : (<div>未确认</div>);
    },
    renderAutoTalent(data) {
      if (data === 0) {
        return (<div>手动填写</div>);
      }
      const talentOptions = this.dataItem.talentOptions || {};
      return (
        <el-tooltip open-delay={800} class='item' placement='top' effect='dark'>
          <div slot='content' style='max-width: 300px;'>
            <div style='margin-bottom:5px;'>供应商：{ talentOptions.channelName || '--' }</div>
            <div style='margin-bottom:5px;'>{ talentOptions.ruleName || '' }</div>
            <div style='margin-bottom:5px;'>公式：{ talentOptions.formula || '--' }</div>
            <div>条件：{ talentOptions.condition || '--' }</div>
          </div>
          <div>自动填写</div>
        </el-tooltip>
      );
    },
    renderTag(data) {
      if (data.length > 0) {
        const names = data.map(i => i.name).join(',');
        return (
          <el-tooltip open-delay={800} class='item' placement='top' effect='dark'>
            <div slot='content' style='max-width: 200px;'>{names}</div>
            <div class='ellipsisOne'>{ names }</div>
          </el-tooltip>
        );
      } else {
        return (<div>--</div>);
      }
    },
    renderEntity(data) {
      return (
        <el-tooltip open-delay={800} class='item' placement='top' effect='dark'>
          <div slot='content' style='max-width: 200px;'>{data.tip}</div>
          <div class='ellipsisOne' >{data.value}</div>
        </el-tooltip>
      );
    },
    renderUser(data) {
      return '';
    }
  },
  render() {
    const fieldName = this.settingItem.fieldName || '';
    const data = this.getData();
    if ((!data || data === '--' || data === '' || fieldName === '') && data !== 0) return (<div>--</div>);
    const textFormat = [
      'orderId', 'performanceMonth', 'mastermind', 'payName',
      'payNumber', 'clientId', 'ID', 'orderForm',
      'accountBelong', 'accountBelongName', 'miniTeskId',
      'content', 'remark', 'channel', 'rebateCustomerName'
    ]; // 普通文字的字段，无需做处理
    const timeFormatNohour = ['createTime', 'accountTime']; // 时间格式,YYYY-MM-DD
    const timeFormat = ['writeOffTime']; // 时间格式,YYYY-MM-DD hh:mm:ss
    const priceFormat = [
      'performance', 'miniTeskCost', 'costChannel', 'maintenanceFee', 'maintenanceFeePaid', 'rebate', 'rebatePaid', 'talentDividends',
      'fansTop', 'starMapNum', 'douNum'
    ]; // 价格, 需要除以 100 并且使用moneyFilter
    const priceFormatWithout = ['discountPrice']; // 使用moneyFilter

    const clientFormat = ['clientType', 'payWay']; // 客户类型

    const linkFormat = ['orderLink', 'resourceCode'];
    const fileFormat = ['publishImage', 'attachment']; // 文件
    const orderOperator = ['orderBusinessOperator', 'orderResourceOperator']; // 执行人
    const priceRightFormat = [
      'articlesPrice', 'cost', 'channelPrice', 'planPrice', 'priceBase'
    ];
    if (textFormat.includes(fieldName)) {
      return this.renderText(data, fieldName === 'orderId');
    } else if (timeFormat.includes(fieldName) || timeFormatNohour.includes(fieldName)) {
      return this.renderTime(data, timeFormatNohour.includes(fieldName));
    } else if (priceRightFormat.includes(fieldName)) {
      return this.renderFormatPrice(data);
    } else if (priceFormat.includes(fieldName) || priceFormatWithout.includes(fieldName)) {
      return this.renderPrice(data, priceFormat.includes(fieldName));
    } else if (clientFormat.includes(fieldName)) {
      return this.renderStauts(data, fieldName === 'payWay' ? 'setPayWay' : '');
    } else if (linkFormat.includes(fieldName)) {
      return this.renderLink(data);
    } else if (fileFormat.includes(fieldName)) {
      return this.renderFile(data);
    } else if (orderOperator.includes(fieldName)) {
      return this.renderOrderOperator(data);
    } else if (fieldName === 'cooperationDepartment') {
      return this.renderCooperationDepartment(data);
    } else if (fieldName === 'costConfirm') {
      return this.renderCostConfirm(data);
    } else if (fieldName === 'orderSource') {
      return data === 1 ? (<div>飞博招商</div>) : data === 2 ? (<div>达人个人引进</div>) : '--';
    } else if (fieldName === 'isAutoTalent') {
      return this.renderAutoTalent(data);
    } else if (fieldName === 'resourceType') {
      return this.renderResourceType(data);
    } else if (fieldName === 'tag') {
      return this.renderTag(data);
    } else if (fieldName === 'resourceAttributionMatrix') {
      return this.renderEntity(data);
    } else if (fieldName === 'createName') {
      return this.renderCreateUser(data);
    }
    return this.renderText(data);
  }
};
